<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" />
    <div class="flex mt24">
      <el-card shadow="never" :body-style="{ padding: '12px 10px 30px' }">
        <div slot="header" class="mb9 f16">
          <span style="font-weight: 600">库存资料</span>
        </div>
        <Table :tableData="tableData" :tableHeader="tableHeader" :TableHeight="550" />
      </el-card>

      <el-card shadow="never" :body-style="{ padding: '12px 10px 30px 40px' }">
        <div slot="header" class="mb9 f16">
          <span style="font-weight: 600">缴库资料</span>
        </div>
        <Table :tableData="tableData2" :tableHeader="tableHeader2" :TableHeight="550" />
      </el-card>

      <el-card shadow="never" :body-style="{ padding: '12px 40px 12px 10px' }">
        <div slot="header" class="mb9 f16">
          <span style="font-weight: 600">&nbsp;</span>
        </div>
        <Table :tableData="tableData3" :tableHeader="tableHeader3" :TableHeight="550" />
      </el-card>

      <el-card shadow="never" :body-style="{ padding: '12px 10px 12px' }">
        <div slot="header" class="mb9 f16">
          <span style="font-weight: 600">发料资料</span>
        </div>
        <Table :tableData="tableData4" :tableHeader="tableHeader4" :TableHeight="550" />
      </el-card>

      <el-card shadow="never" :body-style="{ padding: '12px 0px 12px 60px' }" class="lastCard">
        <div class="btns">
          <el-button class="bg" type="primary" size="default" @click="">保存</el-button>
          <el-button type="primary" size="default" @click="">打印</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'UpperInventorying'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入型体',
    inputValue: ''
  },
  {
    type: 'date',
    dateLabel: '收发日期',
    dateValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '导出收发料报表'
  },
  {
    type: 'input',
    inputLabel: '日期',
    inputDisabled: true,
    inputValue: '2023-06-21'
  },
  {
    type: 'button',
    checkboxLabel: '导出库存日报表'
  },
  {
    type: 'button',
    checkboxLabel: '导出面仓台账(号码)'
  }
])

const tableHeader = ref([
  {
    label: '指令',
    prop: 'instruction'
  },
  {
    label: '型体',
    prop: 'shape'
  },
  {
    label: '颜色',
    prop: 'color'
  },
  {
    label: '订单数量',
    prop: 'orderNum'
  },
  {
    label: '库存数量',
    prop: 'inventoryNum'
  }
])
const tableData = ref([
  {
    instruction: '指令',
    shape: '型体',
    color: '颜色',
    orderNum: '订单数量',
    inventoryNum: '库存数量'
  },
  {
    instruction: '指令',
    shape: '型体',
    color: '颜色',
    orderNum: '订单数量',
    inventoryNum: '库存数量'
  },
  {
    instruction: '指令',
    shape: '型体',
    color: '颜色',
    orderNum: '订单数量',
    inventoryNum: '库存数量'
  },
  {
    instruction: '指令',
    shape: '型体',
    color: '颜色',
    orderNum: '订单数量',
    inventoryNum: '库存数量'
  },
  {
    instruction: '指令',
    shape: '型体',
    color: '颜色',
    orderNum: '订单数量',
    inventoryNum: '库存数量'
  },
  {
    instruction: '指令',
    shape: '型体',
    color: '颜色',
    orderNum: '订单数量',
    inventoryNum: '库存数量'
  },
  {
    instruction: '指令',
    shape: '型体',
    color: '颜色',
    orderNum: '订单数量',
    inventoryNum: '库存数量'
  },
  {
    instruction: '指令',
    shape: '型体',
    color: '颜色',
    orderNum: '订单数量',
    inventoryNum: '库存数量'
  },
  {
    instruction: '指令',
    shape: '型体',
    color: '颜色',
    orderNum: '订单数量',
    inventoryNum: '库存数量'
  },
  {
    instruction: '指令',
    shape: '型体',
    color: '颜色',
    orderNum: '订单数量',
    inventoryNum: '库存数量'
  },
  {
    instruction: '指令',
    shape: '型体',
    color: '颜色',
    orderNum: '订单数量',
    inventoryNum: '库存数量'
  },
  {
    instruction: '指令',
    shape: '型体',
    color: '颜色',
    orderNum: '订单数量',
    inventoryNum: '库存数量'
  },
  {
    instruction: '指令',
    shape: '型体',
    color: '颜色',
    orderNum: '订单数量',
    inventoryNum: '库存数量'
  },
  {
    instruction: '指令',
    shape: '型体',
    color: '颜色',
    orderNum: '订单数量',
    inventoryNum: '库存数量'
  },
  {
    instruction: '指令',
    shape: '型体',
    color: '颜色',
    orderNum: '订单数量',
    inventoryNum: '库存数量'
  },
  {
    instruction: '指令',
    shape: '型体',
    color: '颜色',
    orderNum: '订单数量',
    inventoryNum: '库存数量'
  },
  {
    instruction: '指令',
    shape: '型体',
    color: '颜色',
    orderNum: '订单数量',
    inventoryNum: '库存数量'
  },
  {
    instruction: '指令',
    shape: '型体',
    color: '颜色',
    orderNum: '订单数量',
    inventoryNum: '库存数量'
  },
  {
    instruction: '指令',
    shape: '型体',
    color: '颜色',
    orderNum: '订单数量',
    inventoryNum: '库存数量'
  },
  {
    instruction: '指令',
    shape: '型体',
    color: '颜色',
    orderNum: '订单数量',
    inventoryNum: '库存数量'
  },
  {
    instruction: '指令',
    shape: '型体',
    color: '颜色',
    orderNum: '订单数量',
    inventoryNum: '库存数量'
  },
  {
    instruction: '指令',
    shape: '型体',
    color: '颜色',
    orderNum: '订单数量',
    inventoryNum: '库存数量'
  },
  {
    instruction: '指令',
    shape: '型体',
    color: '颜色',
    orderNum: '订单数量',
    inventoryNum: '库存数量'
  },
  {
    instruction: '指令',
    shape: '型体',
    color: '颜色',
    orderNum: '订单数量',
    inventoryNum: '库存数量'
  },
  {
    instruction: '指令',
    shape: '型体',
    color: '颜色',
    orderNum: '订单数量',
    inventoryNum: '库存数量'
  },
  {
    instruction: '指令',
    shape: '型体',
    color: '颜色',
    orderNum: '订单数量',
    inventoryNum: '库存数量'
  },
  {
    instruction: '指令',
    shape: '型体',
    color: '颜色',
    orderNum: '订单数量',
    inventoryNum: '库存数量'
  },
  {
    instruction: '指令',
    shape: '型体',
    color: '颜色',
    orderNum: '订单数量',
    inventoryNum: '库存数量'
  },
  {
    instruction: '指令',
    shape: '型体',
    color: '颜色',
    orderNum: '订单数量',
    inventoryNum: '库存数量'
  },
  {
    instruction: '指令',
    shape: '型体',
    color: '颜色',
    orderNum: '订单数量',
    inventoryNum: '库存数量'
  },
  {
    instruction: '指令',
    shape: '型体',
    color: '颜色',
    orderNum: '订单数量',
    inventoryNum: '库存数量'
  },
  {
    instruction: '指令',
    shape: '型体',
    color: '颜色',
    orderNum: '订单数量',
    inventoryNum: '库存数量'
  },
  {
    instruction: '指令',
    shape: '型体',
    color: '颜色',
    orderNum: '订单数量',
    inventoryNum: '库存数量'
  }
])

const tableHeader2 = ref([
  {
    label: '部门',
    prop: 'department'
  },
  {
    label: '数量',
    prop: 'num'
  }
])
const tableData2 = ref([
  {
    department: '部门1',
    num: '1'
  },
  {
    department: '部门2',
    num: '2'
  },
  {
    department: '部门3',
    num: '3'
  },
  {
    department: '部门4',
    num: '4'
  },
  {
    department: '部门5',
    num: '5'
  },
  {
    department: '部门6',
    num: '6'
  },
  {
    department: '部门7',
    num: '7'
  },
  {
    department: '部门8',
    num: '8'
  },
  {
    department: '部门9',
    num: '9'
  },
  {
    department: '部门10',
    num: '10'
  },
  {
    department: '部门11',
    num: '11'
  },
  {
    department: '部门12',
    num: '12'
  },
  {
    department: '部门13',
    num: '13'
  },
  {
    department: '部门14',
    num: '14'
  },
  {
    department: '部门15',
    num: '15'
  },
  {
    department: '部门16',
    num: '16'
  },
  {
    department: '部门17',
    num: '17'
  },
  {
    department: '部门18',
    num: '18'
  },
  {
    department: '部门19',
    num: '19'
  },
  {
    department: '部门20',
    num: '20'
  },
  {
    department: '部门21',
    num: '21'
  },
  {
    department: '部门22',
    num: '22'
  },
  {
    department: '部门23',
    num: '23'
  },
  {
    department: '部门24',
    num: '24'
  },
  {
    department: '部门25',
    num: '25'
  },
  {
    department: '部门26',
    num: '26'
  },
  {
    department: '部门27',
    num: '27'
  },
  {
    department: '部门28',
    num: '28'
  },
  {
    department: '部门29',
    num: '29'
  },
  {
    department: '部门30',
    num: '30'
  },
  {
    department: '部门31',
    num: '31'
  },
  {
    department: '部门32',
    num: '32'
  }
])

const tableHeader3 = ref([
  {
    label: '部门',
    prop: 'department'
  },
  {
    label: '数量',
    prop: 'num'
  }
])
const tableData3 = ref([
  {
    department: '部门1',
    num: '1'
  },
  {
    department: '部门2',
    num: '2'
  },
  {
    department: '部门3',
    num: '3'
  },
  {
    department: '部门4',
    num: '4'
  },
  {
    department: '部门5',
    num: '5'
  },
  {
    department: '部门6',
    num: '6'
  },
  {
    department: '部门7',
    num: '7'
  },
  {
    department: '部门8',
    num: '8'
  },
  {
    department: '部门9',
    num: '9'
  },
  {
    department: '部门10',
    num: '10'
  },
  {
    department: '部门11',
    num: '11'
  },
  {
    department: '部门12',
    num: '12'
  },
  {
    department: '部门13',
    num: '13'
  },
  {
    department: '部门14',
    num: '14'
  },
  {
    department: '部门15',
    num: '15'
  },
  {
    department: '部门16',
    num: '16'
  },
  {
    department: '部门17',
    num: '17'
  },
  {
    department: '部门18',
    num: '18'
  },
  {
    department: '部门19',
    num: '19'
  },
  {
    department: '部门20',
    num: '20'
  },
  {
    department: '部门21',
    num: '21'
  },
  {
    department: '部门22',
    num: '22'
  },
  {
    department: '部门23',
    num: '23'
  },
  {
    department: '部门24',
    num: '24'
  },
  {
    department: '部门25',
    num: '25'
  },
  {
    department: '部门26',
    num: '26'
  },
  {
    department: '部门27',
    num: '27'
  },
  {
    department: '部门28',
    num: '28'
  },
  {
    department: '部门29',
    num: '29'
  },
  {
    department: '部门30',
    num: '30'
  },
  {
    department: '部门31',
    num: '31'
  },
  {
    department: '部门32',
    num: '32'
  }
])

const tableHeader4 = ref([
  {
    label: '部门',
    prop: 'department'
  },
  {
    label: '数量',
    prop: 'num'
  }
])
const tableData4 = ref([
  {
    department: '部门1',
    num: '1'
  },
  {
    department: '部门2',
    num: '2'
  },
  {
    department: '部门3',
    num: '3'
  },
  {
    department: '部门4',
    num: '4'
  },
  {
    department: '部门5',
    num: '5'
  },
  {
    department: '部门6',
    num: '6'
  },
  {
    department: '部门7',
    num: '7'
  },
  {
    department: '部门8',
    num: '8'
  },
  {
    department: '部门9',
    num: '9'
  },
  {
    department: '部门10',
    num: '10'
  },
  {
    department: '部门11',
    num: '11'
  },
  {
    department: '部门12',
    num: '12'
  },
  {
    department: '部门13',
    num: '13'
  },
  {
    department: '部门14',
    num: '14'
  },
  {
    department: '部门15',
    num: '15'
  },
  {
    department: '部门16',
    num: '16'
  },
  {
    department: '部门17',
    num: '17'
  },
  {
    department: '部门18',
    num: '18'
  },
  {
    department: '部门19',
    num: '19'
  },
  {
    department: '部门20',
    num: '20'
  },
  {
    department: '部门21',
    num: '21'
  },
  {
    department: '部门22',
    num: '22'
  },
  {
    department: '部门23',
    num: '23'
  },
  {
    department: '部门24',
    num: '24'
  },
  {
    department: '部门25',
    num: '25'
  },
  {
    department: '部门26',
    num: '26'
  },
  {
    department: '部门27',
    num: '27'
  },
  {
    department: '部门28',
    num: '28'
  },
  {
    department: '部门29',
    num: '29'
  },
  {
    department: '部门30',
    num: '30'
  },
  {
    department: '部门31',
    num: '31'
  },
  {
    department: '部门32',
    num: '32'
  }
])
</script>

<style lang="less" scoped>
.lastCard {
  :deep(.el-card__body:last-child) {
    display: flex;
    height: 100%;
    flex-direction: column-reverse;
    align-items: end;
  }

  .btns {
    display: flex;
    margin: 10px 20px 0px;

    .bg {
      background-color: #e7e7e7;
      border: 1px solid #e7e7e7;
      color: #000000;
    }
  }
}
</style>
